<template>
  <div class="inspect-page">
    <Breadcrumb separator=">" class="panel-bread">
      <BreadcrumbItem :to="'/home/inspection/log-type?typeId=' + $route.query.typeId + '&typeName=' + $route.query.typeName">巡检日志</BreadcrumbItem>
      <BreadcrumbItem>巡检详情</BreadcrumbItem>
    </Breadcrumb>
    <!-- 巡检日志表格 -->
    <Card class="inspect-table">
      <Spin v-if="loading" class="spin"></Spin>
      <Table :columns="columns" v-else :loading="loading" :data="inspectLogData"></Table>
    </Card>

  </div>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
import InspectNode from '@/components/inspect-node'
export default {
  data() {
    return {
      inspectLog: {},
      loading: true,
      columns: [{
        type: 'expand',
        width: 50,
        render: (h, params) => {
          if (!params.row) {
            return
          }
          return h(InspectNode, {
            props: {
              row: params.row
            }
          })
        }
      }, {
        title: '巡检类型',
        key: 'inspectTypeName'
      }, {
        title: '巡检对象',
        key: 'inspectObjectName'
      }, {
        title: '巡检结果',
        render: (h, params) => {
          if (params.row.inspectObjectResult === '正常') {
            return h('span', {
              style: {
                color: '#65beb2'
              }
            }, '正常')
          } else if (params.row.inspectObjectResult === '异常') {
            return h('span', {
              style: {
                color: '#e45049'
              }
            }, '异常')
          }
        }
      }, {
        title: '巡检时间',
        key: 'inspectTime'
      }],
      inspectLogData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 切换日志查询条件
    switchOption() {

    },
    // 获取日志数据
    getData() {
      Fetch.get({
        url: '/api/inspect/record',
        params: {inspectRecordId: this.$route.query.inspectRecordId},
        done: () => {
          this.loading = false
        }
      }).then((res) => {
        this.inspectLog = res.data
        if (res.data && res.data.inspectObjectInfoList) {
          // 过滤掉inspectObjectResult为空的数据
          this.inspectLogData = res.data.inspectObjectInfoList.filter((item) => {
            if (item.inspectObjectResult === '正常') {
              item._disableExpand = true
            }
            return item.inspectObjectResult
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.inspect-page {
  background-color: #fff;
  padding: 15px 15px 60px 15px;
}
.inspect-type {
  margin-top: 20px;
  .inspect-type-img {
    padding-right: 10px;
    img {
      width: 46px;
      height: 46px;
      border-radius: 50%;
    }
  }
  .inspect-type-detail {
    span {
      color: #999;
      margin-right: 20px;
      font-size: 14px;
    }
  }
}
.inspect-table {
  margin-top: 20px;
  min-height: 500px;
  .inspect-table-options {
    padding-bottom: 15px;
    a {
      display: inline-block;
      position: relative;
      line-height: 14px;
      padding: 0 10px;
      border-left: 1px solid #999;
      &:first-child {
        margin-left: -10px;
        border-left: 1px solid transparent;
      }
      &.active {
        color: #2d8cf0;
      }
    }
  }
}
.panel-bread {
  margin-top: 5px;
  margin-bottom: 15px;
  padding: 6px 15px 6px 0;;
  border-bottom: 1px solid #eee;
}
.inspect-table /deep/ {
    .ivu-spin {
      margin: auto;
      padding: 60px;
      .ivu-spin-main {
        display: inline-block;
      }
    }
  }
</style>
